<template>
    <div class="list-box">
        <h3 class="list-title">
            <i class="el-icon-refresh list-fresh" @click="refresh"></i>
            <span>司机</span>
            <div class="list-text">显示</div>
            <div class="list-text">隐藏</div>
        </h3>
        <div class="search-div">
            <el-input placeholder="请输入名字或手机号查找司机" v-model="searchDriverStr" class="input-with-select">
                <i class="el-icon-circle-close-outline"
                   style="font-size: 20px;position:relative;top: 10px;"
                   slot="suffix"
                   @click="clearDriverInput">
                </i>
            </el-input>
        </div>
        <ul class="list-content">
            <li v-for="(item,index) in driversData" :key="item.id" @click="showDriver(item.id, [item.lng, item.lat])"
                :class="{'check-type':item.checked}">
                <p>姓名：<span class="black" style="margin-right: 8px">{{item.name}}</span>
                    <a class="tel" :href="'tel:'+item.phone">{{item.phone|phoneFmt}}</a>
                </p>
                <p>车牌：<span class="black">{{item['driver']?item['driver']['car_number']:''}}</span></p>
                <p>已有运单：<span class="black">{{item['undone_order_mission_count']}}单</span></p>
                <p>已载/载重：<span class="black">{{item['driver']?item['driver']['car_capacity']:'0'}}kg</span></p>
                <p style="text-align: center">
                    <el-button size="mini" @click.stop="send(item.id)">指派给我</el-button>
                </p>
            </li>
        </ul>
        <div class="mission-list" v-if="showLog">
            <div class="mission-title">
                <span class="bag"></span><span class="m-title">{{driverName}}的任务</span><span class="close" @click="showDriver(driverId)"></span>
            </div>
            <div class="mission-body">
                <div class="mission-box" v-for="items in driversTask" :key="items.id"
                     @click="$router.push({path: '/dialog/show/express.mission/' + items.id})">
                    <div class="one">
                        <p class="m-left">
                            <span class="m-clock"></span>
                            <span :class="parseInt(((items.limit_time_timestamp) * 1000 - nowTimeStamp)/1000/60)< 30?'color-red':''">
                                <span class="color-red" v-if="parseInt(((items.limit_time_timestamp) * 1000 - nowTimeStamp)/1000/60) < 0">(超)</span>
                                {{Math.abs(parseInt(((items.limit_time_timestamp) * 1000 - nowTimeStamp)/1000/60))}}min
                            </span>
                        </p>
                        <p class="m-right"><span class="m-bag"></span>取{{items.related_pick_orders_count}}/送{{items.related_send_orders_count}}
                        </p>
                    </div>
                    <p class="one">
                        <span class="m-user"></span><span>[客户] {{items.docked_name}}</span>
                    </p>
                    <p class="one">
                        <span class="m-phone"></span>{{items.docked_phone}}
                    </p>
                    <p class="one last">
                        <span class="m-local"></span>{{items.address}}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                showDriverList: false,
                searchDriverStr: "",
                nowTimeStamp: null,
                timer: null,
                showLog: false,
                driverId: null,
                driverName: "",
                clickId:null,
                clickLnglat:null,
                times: null
            };
        },
        props: {
            driversData: {
                type: Array,
                default: () => {
                    return []
                }
            },
            driversTask: {
                type: Array,
                default: () => {
                    return []
                }
            }
        },
        computed: {
            dataRefreshDialog() {
                return this.$store.state.num;
            }
        },
        watch: {
            driversTask: function (newValue) {
                this.getNowDate()
            },
            dataRefreshDialog: function () {
                this.loading = true;
                this.showDriver(this.clickId, this.clickLnglat);
            },
            searchDriverStr: function (val) {
                clearInterval(this.times);
                this.times = setTimeout(() => {
                    console.info('dfasdf', val);
                    this.handleIconClick();
                },500)
            }
        },

        filters: {
            phoneFmt: (phone) => {
                phone += "";
                let three = phone.slice(0, 3), center = phone.slice(3, 7), last = phone.slice(7);
                return `${three} ${center} ${last}`;
            }
        },
        methods: {
            clearDriverInput() {
                this.searchDriverStr = '';
            },
            getNowDate() {
                this.nowTimeStamp = Date.parse(new Date());
                console.log('当前时间戳', this.nowTimeStamp);
            },
            refresh() {
                this.searchDriverStr = "";
                this.showLog = false;
                this.$emit("refresh");
            },
            handleIconClick() {
                if (this.searchDriverStr.length > 20) {
                    this.$message.error('字数限制20字');
                    return;
                }
                this.showLog = false;
                this.timer = setTimeout(() => {
                    clearTimeout(this.timer);
                    this.loading();
                }, 400);
                this.$http.get("common/user/driver?name=" + this.searchDriverStr)
                    .then(res => {
                        clearTimeout(this.timer);
                        this.$emit("cancel");
                        if (!!res.data.data && res.data.data.length > 0) {
                            this.$message.success('数据已更新');
                        } else {
                            this.$message.info('暂无数据');
                        }
                        this.$emit("refresh", res.data.data);
                    })
                    .catch(err => {
                        clearTimeout(this.timer);
                        this.$emit("cancel");
                        this.$message.error("查询出错");
                        console.log(err);
                    });
            },
            loading() {
                this.$emit("load");
            },
            send(driverId) {
                this.$emit("send", driverId);
            },
            showDriver(driverId, lnglat) {
                this.clickId = driverId;
                this.clickLnglat = lnglat;
                this.$emit("showDriver", driverId, lnglat);
            },
            showDriverListTrue() {
                this.showDriverList = false;
                this.$emit("showDriverList", true);
            },
            showDriverListFalse() {
                this.showDriverList = true;
                this.$emit("showDriverList", false);
            }
        }
    };
</script>
<style scoped lang='less'>

    .list-box {
        z-index: 1000;
        .list-content {
            li {
                height: auto;
            }
        }
        left: 0;
        .black {
            color: #000;
        }
        .check-type {
            border-color: #1989FA;
        }
        .mission-list {
            position: absolute;
            background-color: rgba(255, 255, 255, 0.7544);
            width: 240px;
            top: 0;
            bottom: 0;
            left: 240px;
            transition: .3s;
            border-left: 1px solid #ddd;
            display: flex;
            flex-direction: column;
            .mission-title {
                flex: 0 0 56px;
                display: flex;
                height: 56px;
                align-items: center;
                span {
                    display: block;
                    color: #000;
                    font-size: 16px;
                }
                .bag {
                    width: 18px;
                    height: 18px;
                    margin: 0 5px 0 57px;
                    background: url(../../../../../assets/img/renwu@2x.png) no-repeat;
                    background-size: contain;
                }
                .m-title {
                    display: block;
                    width: 130px;
                    text-align: left;
                    overflow: hidden;
                }
                .close {
                    width: 14px;
                    height: 14px;
                    background: url(../../../../../assets/img/cha@2x.png) no-repeat;
                    background-size: contain;
                    cursor: pointer;
                }
            }
            .mission-body {
                flex: 1;
                overflow-y: scroll;
                overflow-x: hidden;
                .mission-box:hover {
                    background-color: #eee;
                }
                .mission-box {
                    padding: 8px 12px;
                    background: #FFFFFF;
                    border: 1px solid #DCDFE6;
                    cursor: pointer;
                    .one {
                        /*height: 20px;*/
                        margin-bottom: 10px;
                        display: flex;
                        align-items: center;
                        font-size: 14px;
                        color: #333;
                        letter-spacing: 0;
                        .m-clock, .m-bag, .m-user, .m-local {
                            display: block;
                            width: 17px;
                            height: 16px;
                            background: url(../../../../../assets/img/shijian@2x.png) no-repeat;
                            background-size: contain;
                            margin-right: 9px;
                        }
                        .color-red {
                            color: red;
                            display: flex;
                            align-items: center
                        }
                        .m-bag {
                            background: url(../../../../../assets/img/huowu@2x.png) no-repeat;
                            background-size: contain;
                        }
                        .m-left, .m-right {
                            display: flex;
                            /*justify-content: space-between;*/
                            align-items: center;
                            flex: 1;
                        }
                        .m-right {
                            justify-content: flex-end;
                        }
                        .m-user {
                            background: url(../../../../../assets/img/lianxir@2x.png) no-repeat;
                            background-size: contain;
                        }
                        .m-phone{
                            width: 17px;
                            height: 16px;
                            margin-right: 9px;
                            background: url(../../../../../assets/img/phone@3x.png) no-repeat;
                            background-size: contain;
                        }
                        .m-local {
                            background: url(../../../../../assets/img/dingwei@2x.png) no-repeat;
                            background-size: contain;
                            flex: 0 0 16px;
                            width: 16px;
                            height: 16px;
                            line-height: 16px;
                            border-radius: 8px;
                            display: block;
                            margin-top: 3px;
                        }
                    }
                    .last {
                        align-items: self-start;
                        height: auto;
                        text-align: left;
                        font-size: 16px;
                        margin-bottom: 0;
                    }
                }
            }
        }

    }
</style>

